<template>
	<!-- 这是自定义的组件 -->
	<view class="my-search-container" :style="{'background-color': bgcolor}" @click="searchBoxHandler">
		<!-- 使用view组件模拟input输入框 -->
		<!-- 动态绑定style属性 以键值对的形式 -->
		<view class="my-search-box" :style="{'border-radius': radius + 'px'}" >
			<uni-icons type="search" size="17"></uni-icons>
			<text class="placeholder">搜索</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-search",
		data() {
			return {

			};
		},
		//与data节点同级下声明
		props:{
			 // 背景颜色
			  bgcolor: {
			    type: String,
			    default: '#C00000'
			  },
			  // 圆角尺寸
			  radius: {
			    type: Number,
			    // 单位是 px
			    default: 18
			  }
		},
		methods:{
			//点击模拟的input输入框就触发这个事件处理函数
			searchBoxHandler(){
				// console.log(111)
				// s确实可以触发自身的@click事件
				//还得触发这个组件外部的@click事件
				this.$emit('click');
				//通过this.$emit()  函数就可以触发外部的事件了
			}
		}
	}
</script>

<style lang="scss">
	.my-search-container {
		// background-color: #c00000;由props属性决定
		height: 50px;
		padding: 0 10px;
		display: flex;
		align-items: center;
	}

	.my-search-box {
		height: 36px;
		background-color: #ffffff;
		// border-radius: 15px;由props属性决定
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.placeholder {
			font-size: 15px;
			margin-left: 5px;
		}
	}
</style>
